<template>
  <div class="phone-field">
    <Icon
      type="ios-telephone"
      v-if="data && data.length"
    ></Icon>{{number}}
    <div class="phone-call" v-if="option.buttons.length">
      <span
        class="phone-button-ic"
        @click="phoneCall"
        v-if="data && data.length && option.buttons.includes('call')"
      >拨打</span>
      <span
        class="phone-button-ic"
        style="margin-left: -5px;"
        @click="showPhoneNumber"
        v-if="data && data.length && option.buttons.includes('display')"
      >显示</span>
    </div>
  </div>
</template>
<script>
import Helper from 'store/helper';
import $ from '@/common';
var Base64 = require('js-base64').Base64;
export default {
	props: {
		data: {},
		row: {},
		index: {},
		field: {},
		option: {},
	},
	data() {
		return {
			parseNumber: null,
		};
	},
	computed: {
		number() {
			if (this.field && this.field.tpl) {
				let m = this.field.tpl.match(/<cert(?:[^>]+)?>(.*?)<\/cert>/);
				if (m && m[1]) {
					let v = $.composeValue(m[1], this.row);
					this.parseNumber = Base64.decode(v);
					return $.coverValue(this.parseNumber, 'moblie');
				}
			}

      if (this._phoneNumber !== this.row.mobile) {
        this.parseNumber = undefined;
        this.phoneNumber = undefined;
        return this.row.mobile;
      }

			return this.parseNumber || this.data;
		},
	},
	created() {
		this.upper = Helper.getParentStore(this);
		if (!this.upper.actionTrigger) {
			var upper = this;
			while (upper.$parent) {
				upper = upper.$parent;
				if (upper.actionTrigger && upper.$actionCollection) {
					break;
				}
			}
			this.upper = upper;
		}
	},
	methods: {
		phoneCall() {
      this.phoneNumber ? this.call() : this.getNumber().then(this.call);
		},
    call() {
      this.upper.actionTrigger &&
       this.upper.actionTrigger({
         data: this.row.id,
         code: this.option.action,
         row: this.row,
         index: this.index,
         option: {
           number: this.phoneNumber || this.parseNumber || this.data,
         },
       });
    },
		showPhoneNumber() {
      this.parseNumber ||
        $.link(this.getPath(this.option.display_path, this.row.id)).then((res) => {
          this._phoneNumber = this.row.mobile;
          this.parseNumber || (this.parseNumber = res.data.phone);
          this.row.mobile = res.data.phone;
        })
		},
    getNumber() {
      return $.link(this.getPath(this.option.call_path, this.row.id)).then((res) => {
        this._phoneNumber = this.row.mobile;
        this.phoneNumber = res.data.phone;
        // this.row.mobile = res.data.phone;
      })
    },
    getPath(path, value) {
      return path.replace(/{id}/, value);
    }
	},
};
</script>
<style lang="less">
.form-field .phone-field {
	.phone-call {
	}
}
.phone-button-ic {
  padding: 2px 12px;
  color: #168cf3;
  border: 1px solid #168cf3;
  background: #fff;
  border-radius: 4px;
  display: inline-block;
}
.phone-field {
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	display: inline-block;
	color: #168cf3;
	.ivu-icon {
		color: #168cf3;
	}
	.phone-call {
		display: none;
		position: absolute;
    left: 53px;
	}
	&:hover {
		color: #57a3f3;
		.phone-call {
			display: block;
		}
	}
}
</style>

